<template>
  <div class="multi-select-picker">
    <!-- 输入框部分 -->

    <van-popup v-model:show="showPopup" position="bottom" :style="{ height: '50%', borderRadius: '16px 16px 0 0' }">

      <div class="container">
        <div class="header">
          <div @click="showPopup = false">取消</div>
          <div @click="confine">确认</div>
        </div>
        <!-- <input v-model="searchQuery" type="text" placeholder="搜索用户..." @focus="showPopup = true"/> -->
        <div class="popup-container">
          <ul>
            <li v-for="(user, index) in filteredUsers" :key="user.UserId" @click="toggleSelection(user, index)"
              :class="{ selected: isSelected(user) }">
              {{ user.Name }} <img src="@/assets/images/main/icon-mark.png" v-if="user.Flag == true">
            </li>
            <li v-if="filteredUsers.length === 0">暂无用户数据结果</li>
          </ul>
        </div>

      </div>
    </van-popup>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from 'vue';
import { reqUserQuery } from "@/api/user";
interface User {
  UserId: number;
  Name: string;
  Flag?: Boolean
}

export default defineComponent({
  name: 'MultiSelectPicker',
  setup(props, { emit }) {
    // 模拟的用户数据
    const users = ref<User[]>([])
    // 存储用户输入的搜索查询
    const searchQuery = ref('');

    // 存储已选择的用户
    const selectedUsers = ref<User[]>([]);

    // 控制弹出框的显示与隐藏
    const showPopup = ref(false);
    const open = () => {
      showPopup.value = true
    }
    const closes = () => {
      showPopup.value = false
    }

    // 根据搜索查询过滤用户列表
    const filteredUsers = computed(() => {
      return users.value.filter((user) =>
        user.Name.toLowerCase().includes(searchQuery.value.toLowerCase())
      );
    });

    // 判断用户是否已经被选中
    const isSelected = (user: User) => {
      return selectedUsers.value.some((selectedUser) => selectedUser.UserId === user.UserId);
    };
    // 移除已选择的用户
    const removeUser = (user: User) => {
      selectedUsers.value = selectedUsers.value.filter((selectedUser) => selectedUser.UserId !== user.UserId);
    };
    // 切换用户选择状态
    const toggleSelection = (user: User, _index: number) => {
      user.Flag = !user.Flag
    };
    const getUserList = async () => {
      const res = await reqUserQuery({})
      if (res.code === 200) {
        console.log(res, '用户数据');
        users.value = res.data || []

      }
    }
    //确定选择的☑
    const confine = () => {
      console.log(111);
      emit("confirm", [{ Name: '王二狗', Id: 1 }]);

    }
    onMounted(() => {
      getUserList()
    })


    return {
      searchQuery,
      selectedUsers,
      showPopup,
      filteredUsers,
      toggleSelection,
      isSelected,
      getUserList,
      open,
      closes,
      confine,
    };
  },
});
</script>

<style scoped lang="scss">
.multi-select-picker {
  position: relative;
  width: 100%;
}

input {
  padding: 8px;
  width: 100%;
  box-sizing: border-box;

}


.container {
  padding: 0px 15px;
  width: 345px;
  display: flex;
  flex-direction: column;

  .header {
    display: flex;
    justify-content: space-between;
    width: 345px;
    position: fixed;
    background: #fff;
    z-index: 999;
    height: 50px;
    line-height: 50px;


    div {
      width: 30px;
      height: 21px;
      font-weight: 500;
      font-size: 15px;
      color: #000721;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }

    div:nth-child(2) {
      color: #3976CC;
    }
  }


}

.popup-container {
  width: 345px;
  overflow-y: auto;
  z-index: 100;
  color: #000;
  margin-top: 60px;

  ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }

  li {
    // padding: 8px;
    height: 50px;
    display: flex;
    justify-content: center;
    cursor: pointer;
    align-items: center;
    border-bottom: 1px solid #E4E4E4;
    font-weight: 500;
    font-size: 15px;
    color: #111111;
    line-height: 0px;
    text-align: right;
    font-style: normal;
    text-transform: none;
    position: relative;

    img {
      position: absolute;
      right: 10px;
      width: 15px;
      height: 15px;
    }
  }

  li:hover {
    background-color: #f1f1f1;
  }

  li:active {
    background-color: #ddd;
  }
}
</style>